<template>
  <div class="hs-ew">
    <div class="hs-ew-wrap" id="week-root"></div>
  </div>
</template>

<script>
//七日员工出勤活跃情况
import * as echarts from "echarts";

const option = {
  title: {
    text: "-  七日员工出勤活跃情况  -",
    subtext: "",
    left: "center",
    top: 10,
    textStyle: {
      color: "#CFEEF8",
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: "item",
  },
  color: ["#1880E3", "#15939D"],
  legend: {
    bottom: 12,
    left: "center",
    data: [
      {
        name: "七日活跃出勤员工",
        icon: "circle",
        textStyle: {
          color: "#8F9297",
          fontSize: 8,
        },
      },
      {
        name: "七日非活跃出勤员工",
        icon: "circle",
        textStyle: {
          color: "#8F9297",
          fontSize: 8,
        },
      },
    ],
  },
  series: [
    {
      name: "活跃情况",
      type: "pie",
      radius: ["30%", "50%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      center: ["50%", "50%"],
      emphasis: {
        label: {
          show: true,
          fontSize: "10",
          fontWeight: "bold",
        },
      },
      label: {
        normal: {
          formatter: "{b}:{d}%",
          textStyle: {
            fontWeight: "normal",
            fontSize: 9,
          },
        },
      },
      labelLine: {
        normal: {
          show: true,
          length: 8,
          length2: 8,
        },
      },
      data: [
        { value: 1048, name: "七日活跃出勤员工" },
        { value: 735, name: "七日非活跃出勤员工" },
      ],
    },
  ],
};
export default {
  name: "emAtendinWeek",
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(function () {
      this.drawbar("week-root");
      return;
      var that = this;
      var resizeEWTimer = null;
      window.onload = function () {
        if (resizeEWTimer) {
          clearTimeout(resizeEWTimer);
        }
        resizeEWTimer = setTimeout(() => {
          that.drawbar("week-root");
        }, 300);
      };
    });
    this.$store.watch(
      (state, getter) => {
        return state.statistical.emAttendinWeek;
      },
      () => {
        this.drawbar("week-root");
      }
    );
  },
  methods: {
    drawbar(id) {
      let o = document.getElementById(id);
      let height = o.clientHeight;
      let width = o.clientWidth;
      o.style.height = height + "px";
      o.style.width = width + "px";
      this.chart = echarts.init(o, null);
      option.series[0].data = this.$store.state.statistical.emAttendinWeek;
      this.chart.setOption(option);
    },
  },
};
</script>

<style>
.hs-ew {
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
}
.hs-ew-wrap {
  /* border: 1px solid yellow; */
  width: 100%;
  height: 100%;
}
</style>